<template>
    <div class="allnum">
      <div>
        <transition name="bounce">
          <svg @click="numjs" v-show="food.num>0" style="width: 0.36rem;height: 0.36rem;">
            <image xlink:href="../../../static/img/remove_circle_outline.svg" style="width: 0.36rem;height: 0.36rem"></image>
          </svg>
        </transition>
      </div>
      <span v-show="food.num>0">{{food.num}}</span>
      <div>
        <svg @click="numadd" style="width: 0.36rem;height: 0.36rem;">
          <image xlink:href="../../../static/img/add_circle.svg" style="width: 0.36rem;height: 0.36rem"></image>
        </svg>
      </div>
    </div>
</template>

<script>
export default {
  name: 'thenum',
  data () {
    return {
    }
  },
  props: [ 'food' ],
  methods: {
    numadd () {
      this.su++
      if (!this.food.num) {
        this.$set(this.food, 'num', 1)
      } else {
        this.food.num++
      }
    },
    numjs () {
      this.food.num--
    }
  }
}
</script>

<style scoped lang="less">
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.allnum{
  display: flex;
  justify-content: space-between;
  align-items: center;
  &>span{
    font-size: 0.2rem;
    color: rgb(147,153,159);
  }
}
</style>
